<template>
	<view>
		<view class="topnav">
			<uni-nav-bar :fixed="true" :title="item.title" leftIcon="left" @clickLeft="clickLeft"></uni-nav-bar>
		</view>
		<view class="baseInfoBox">
			<view class="baseInfo">
				<view class="limg">
					<image style="width: 200rpx;height: 300rpx;" :src="item.cover"></image>
				</view>
				<view class="rbaseInfo">
					<view class="title">
						<text>{{item.title}} <small style="font-size: 20rpx;">{{item.fictionType}}</small></text>
					</view>
					<view class="author">
						{{item.author}}
					</view>
					<view class="descs">
						{{item.descs}}
					</view>
				</view>
			</view>
		</view>
		<view class="lastReadBox">
			<view class="lastRead">
				<text @click="goPage(lastReadChapter)">上次读: {{lastReadChapter.title}}</text>
			</view>
		</view>
		<view class="listBox">
			<uni-list>
				<uni-list-item :clickable="true" @click="goPage(item)" name="item.title" v-for="(item,index) in dataList"  :key="index" :title="item.title" ></uni-list-item>
			</uni-list>
			<uni-load-more :status="moreMsg"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				book:{},
				lastReadChapter:{},
				item:{},
				dataList:[],
				total:0,
				chapterList:[],
				moreMsg:"more",
				start:30,
				end:60,
			}
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
			this.loadChapters()
			this.getLastReadChapter()
			this.setReadHistory()
		},
		onPullDownRefresh() {
			this.loadChapters()
			this.getLastReadChapter()
		},
		onReachBottom() {
			this.spliceChapters()
		},
		onShow() {
			this.getLastReadChapter()
		},
		methods: {
			setReadHistory(){
				let historyBox = uni.getStorageSync("cartoon")
				if(!historyBox){
					historyBox =[]
					historyBox.push(this.item)
				}else{
					let flag =true
					historyBox.forEach(option=>{if(option.comicId==this.item.comicId){flag = false}})
					if(flag)historyBox.push(this.item)
				}
				uni.setStorageSync("cartoon",historyBox);
			},
			getLastReadChapter(){
				let obj = uni.getStorageSync(this.item.comicId)
				this.lastReadChapter =  obj
			},
			goPage(item){
				uni.navigateTo({
					url:"/pages/index/cartoon/content/content?item="+JSON.stringify(item),
					success: (res) => {
						uni.setStorageSync(this.book.comicId,item)
					}
				})
			},
			clickLeft(){
				uni.navigateBack()
			},
			loadChapters(){
				this.moreMsg="loading"
				uni.request({
					url: `https://api.pingcc.cn/comicChapter/search/${this.item.comicId}`,
					method: "GET",
					success: ({
						data
					}) => {
						if(data.data.chapterList){
							let {chapterList,...book}  = data.data
							this.book = book
							this.moreMsg = data.data.chapterList.length<=30?"no-more":"more"
							this.dataList = data.data.chapterList.splice(0,30)
							this.chapterList = this.dataList.concat(data.data.chapterList)
						}else{
							this.moreMsg="no-more"
						}
					},
					complete() {
						uni.stopPullDownRefresh()
					}
				})
			},
			spliceChapters(){
				let size=30
				let chaptersSplice = this.chapterList.slice(this.start,this.end)
				this.dataList.push(...chaptersSplice)
				this.start+=size
				this.end+=size
				if(chaptersSplice.length<=0){
					this.moreMsg="no-more"
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.baseInfoBox{
		margin-bottom: 20rpx;
		border-bottom: 1px solid #e5e5e5;
	}
	.baseInfo{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin: 0px 10rpx;
		.rbaseInfo{
			margin-left: 10rpx;
			.author{
				font-size: 30rpx;
				font-weight: 380;
			}
			.descs{
				font-size: 20rpx;
				font-weight: 300;
			}
		}
	}
	.lastReadBox{
		font-size: 30rpx;
		font-weight: 390;
		.lastRead{
			padding-left: 10rpx;
		}
	}
	.listBox{
		margin-top: 20rpx;
	}
</style>
